Component({
  externalClasses: ['item-class', 'select-class'],

  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持  
  },

  properties: {
    scrollLeft: Number,
    navIndex: {
      type: String || Number,
      value: 0,
      observer(newVal, oldVal, changedPath){
        let td = this.data;
        this.setData({
          scrollLeft: ((td.navIndex) - (this.navMidVal || 1)) * this.baseElWidth
        });
      }
    },
    data: Array,
    height: String || Number
  },


  ready(){
    let _this = this;
    let query_el = _this.createSelectorQuery();

    query_el.select('.nav-item').boundingClientRect();
    query_el.exec(res => {
      _this.baseElWidth = res[0].width;
      _this.navMidVal = Math.ceil(res[0].width / 750);
    });
  },

  methods: {
    _getNavItem(e) {
      let td = this.data;
      let ed = e.currentTarget.dataset;
      let base_el_width = this.baseElWidth;
      this.setData({
        scrollLeft: ((ed.index) - this.navMidVal) * base_el_width,
        navIndex: ed.index
      });

      this.triggerEvent('callback', {
        index: ed.index,
        params: ed.params
      });
    }
  }

})
